<template>
  <div class="login">
    登录
    <p>我上课永远不睡觉</p>
    <el-button type="primary">Primary</el-button>
    <ul>
      <li>1111</li>
      <li>2222</li>
      <li>3333</li>
    </ul>
  </div>
  <p class="p1">我是p1</p>
  <p class="p2">我是p2</p>
</template>

<script>
export default {
  name: '',
  data() {
    return {}
  }
}
</script>
<style lang='scss' scoped >
/* css预编译工具
  less sass  这两个工具可以直接写css ,但是本身还扩展了一些新的语法,方便你去写样式
  注意: 这些less或sass 最终打包成上线的生产包的时候,都会被编译成css,因为浏览器只能认识css
  01: 支持所有的以前的css 
  02: 可以嵌套. 
  03: & 表示父元素
  04: 定义变量  语法:$变量名:变量值;
*/
/* 定义变量 */
$red: red;
$w200: 200px;
/* 定义 minxi*/
@mixin box {
  width: $w200;
  height: 300px;
  background: yellow;
}
/* 定义mixin 有参数 */
@mixin box1($a, $b, $bgcolor) {
  width: $a;
  height: $b;
  background: $bgcolor;
}
.login {
  p {
    background: deeppink;
  }
  ul {
    /* li:nth-child(2) {
      font-size: 30px;
    } */
    li {
      &:nth-child(2) {
        font-size: 30px;
        color: $red;
      }
    }
  }
}
.p1 {
  @include box;
}
.p2 {
  @include box1(500px, 500px, green);
}
</style>